<template>
  <div class="currencyTreasure_wrap">
    <header class="cur_header">
      <i class="iconfont icon-fanhui" @click="$router.go(-1)"></i>
      <h3 class="title" :class="`active${activeNum}`">
        <span :class="{'income': activeNum!==0, 'active_style' : activeNum===0}" @click="tabActive(0)">Current</span>
        <span :class="{'expenditure': activeNum!==0, 'active_style1' : activeNum===1}" @click="tabActive(1)">Regular</span>
      </h3>
    </header>
    <div class="total_box" v-if="activeNum===0">
      <div class="to_left">
        <h4>{{amount}}</h4>
        <span>Total current currency</span>
      </div>
      <div class="to_right">
        <h4>{{beforeAmount}}</h4>
        <span>Yesterday's power</span>
      </div>
    </div>
    <div class="list_wrap" v-if="activeNum===0" ref="scrollBox">
      <div class="tab_title">
        <div class="title_content" :class="`active${activeNum}`">
          <span class="detail">details</span>
        </div>
        <!-- Small calendar -->
        <div class="date_wrap" @click="goSelectStart">
          <span class="date">{{showDate}}</span>
          <span class="iconfont icon-rili"></span>
        </div>
      </div>
      <!-- Record list -->
      <ul class="detail_list" ref="scrollBoxInner">
        <div class="profit">
          <span class="iconfont icon-weixuanzhong"></span>
          <span class="txt">
            Accumulated income:
            <span class="pro_num">{{profit}}</span></span>
        </div>
        <li class="public_none_data" v-if="!list.length && isRequest">No data</li>
        <li class="detail_item" v-for="(item, index) in list" :key="index" v-else>
          <div class="left_box">
            <p class="nick">{{item.typeName}}</p>
            <span class="create_time">{{item.create_at}}</span>
          </div>
          <div class="right_box">
            <p class="num">{{activeNum === 0 ? `+${item.money}` : `-${item.money}`}}<span class="point"></span></p>
          </div>
        </li>
      </ul>
    </div>
    <!-- bottom -->
    <div class="cur_footer" v-if="activeNum===0">
      <router-link tag="div" to="turnoutCurrency" class="switch_in">Turn out the coin</router-link>
      <router-link tag="div" :to="{path: 'turnintoCurrency', query: {type: 0}}" class="switch_out">Turn into the coin</router-link>
    </div>
    <!--—————————————————————————————————————— regular ————————————————————————————————————————————————————-->
    <div class="total_box" v-if="activeNum===1">
      <div class="to_left">
        <h4>{{amount}}</h4>
        <span>Total regular currency</span>
      </div>
      <div class="to_right">
        <h4>{{beforeAmount}}</h4>
        <span>Yesterday's power</span>
      </div>
    </div>
    <div class="list_wrap" v-if="activeNum===1" ref="scrollBox">
      <div class="tab_title">
        <div class="title_content" :class="`active${activeNum}`">
          <span class="detail">details</span>
        </div>
      </div>
      <!-- Record list -->
      <ul class="detail_list" ref="scrollBoxInner">
        <li class="public_none_data" v-if="!list.length && isRequest">No data</li>
        <li class="detail_item" v-for="(item, index) in list" :key="index" v-else>
          <div class="left_box">
            <p class="nick">{{item.money}}</p>
            <span class="create_time">{{item.createtime}}</span>
          </div>
          <div class="right_box">
            <p class="earning">Proceeds:<span class="point">{{item.already_paid}}</span></p>
            <p class="period">Cycle:{{item.day}} ( Leftover<span class="overplus">{{item.surplus_day}}</span>day )</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- bottom -->
    <router-link tag="div" :to="{path: 'turnintoCurrency', query: {type: 1}}" class="cur_footer1" v-if="activeNum===1">
      Turn into the coin
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'currencyTreasure',
  data () {
    return {
      amount: '',
      beforeAmount: '',
      profit: '',
      activeNum: 0,
      isRequest: false, // Have you requested data?
      canRequest: true, // Can you request data, request lock?
      page: 1, // Paging default data
      hasMoreData: true, // Do you have more data?
      list: []
    };
  },
  methods: {
    tabActive (num) {
      if (this.activeNum === num) {
        return false;
      } else {
        this.page = 1;
        this.isRequest = false;
        this.list = [];
        this.activeNum = num;
        if (this.activeNum === 1) {
          this.$router.replace({path: 'currencyTreasure', query: {navIndex: 1}});
        } else {
          this.$router.replace({path: 'currencyTreasure'});
        }
        this.getInfo();
      }
    },
    // calendar event
    goSelectStart () {
      this.$store.commit('configDateWrap');
    },
    // Recording interface
    getInfo () {
      let url;
      this.activeNum === 0 ? url = 'index/accountlog/bb_log' : url = 'index/accountlog/bb_log_dq';
      this.canRequest = false;
      this.axios.get(url, {
        params: {
          page: this.page,
          date: this.startTime
        }
      }).then(({data}) => {
        this.isRequest = true;
        if (data.code === 200) {
          this.canRequest = true;
          this.amount = data.data.count;
          this.beforeAmount = data.yes;
          if (this.activeNum === 0) {
            this.profit = data.income;
          }
          this.page++;
          let resObj;
          resObj = data.data.list;
          if (resObj.length < 10 || !resObj.length || !resObj) {
            this.hasMoreData = false;
          } else {
            this.hasMoreData = true;
          }
          this.list = this.list.concat(resObj);
        } else {
          this.Toast(data.message);
        }
      });
    }
  },
  watch: {
    showDate () {
      this.page = 1;
      this.isRequest = false;
      this.list = [];
      this.getInfo();
    }
  },
  computed: {
    showDate () {
      if (!this.$store.state.date.selectResult[1]) {
        return 'This month';
      } else {
        return `${this.$store.state.date.selectResult[0]}-${this.$store.state.date.selectResult[1]}`;
      }
    },
    startTime () {
      if (!this.$store.state.date.selectResult[1]) {
        return `${new Date().getFullYear()}-${new Date().getMonth() + 1}`;
      } else {
        return this.$store.state.date.selectResult.join('-');
      }
    },
    endTime () {
      if (!this.$store.state.date.selectResult[1]) {
        return `${new Date().getFullYear()}-${new Date().getMonth() + 2}`;
      } else {
        return `${this.$store.state.date.selectResult[0]}-${this.$store.state.date.selectResult[1] + 1}`;
      }
    }
  },
  mounted () {
    this.$refs.scrollBox.onscroll = (e) => {
      let bottomClient = this.$refs.scrollBoxInner.clientHeight - e.target.scrollTop - e.target.clientHeight;
      if (bottomClient < 50 && this.canRequest && this.hasMoreData) this.getInfo();
    };
    this.activeNum = Number(Boolean(this.$route.query.navIndex));
    this.getInfo();
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/public.scss';
  .currencyTreasure_wrap{
    width: 100%;
    background: #f4f5f7;
    position: relative;
    padding: 90px 0;
    .cur_header {
      width: 100%;
      height: 90px;
      line-height: 90px;
      background: #fff;
      padding: 0 30px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      .icon-fanhui {
        width: 50px;
        font-size: 30px;
        margin-right: 30%;
      }
      .title {
        width: 30%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: normal;
        font-size: 28px;
        color: #666666;
        position: relative;
        height: 80%;
        &::after{
          display: block;
          content: '';
          width: 95px;
          height: 6px;
          background: #f8a120;
          position: absolute;
          transition: left .3s;
          bottom: 0;
          border-radius: 25px;
        }
        &.active0::after{
          left: 0px;
          content: '';
        }
        &.active1::after{
          left: calc(74%);
          content: '';
        }
        .income{
          margin-right: 60px;
        }
        .active_style {
          margin-right: 60px;
          color: #222222;
        }
        .active_style1 {
          color: #222222;
        }
        span {
          display: block;
          margin-right: 30px;
        }
      }
    }
    .total_box {
      height: 203px;
      background: url('./../image/pic2_02.png') no-repeat;
      background-size: cover;
      padding: 0 45px;
      color: #fff;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      // position: absolute;
      // width: 100%;
      // z-index: 10px;
      h4 {
        font-size: 48px;
        padding-top: 52px;
        font-weight: 500;
      }
      span {
        font-size: 24px;
      }
    }
    .list_wrap {
      width: 100%;
      position: absolute;
      overflow-y: auto;
      top: 315px;
      bottom: 0;
      padding-bottom: 90px;
      // z-index: 10px;
      -webkit-overflow-scrolling: touch;   /*This is to smooth and smooth.*/
      //  Record the head
      .tab_title {
        width: 100%;
        height: 95px;
        background: #fff;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1Px solid #e6e6e6;
        .title_content{
          height: 100%;
          line-height: 95px;
          font-size: 28px;
          color: #666666;
        }
        .date_wrap{
          font-size: 24px;
          display: flex;
          align-items: center;
          .date{
            margin-right: 17px;
            color: #666;
          }
          .icon-rili{
            font-size: 30px;
            color: #2f2f2f;
          }
        }
      }
      // Record list
      .detail_list {
        padding: 0 30px;
        background: #fff;
        overflow: hidden;
        // Cumulative income
        .profit {
          height: 92px;
          background: #fff;
          padding-left: 12px;
          box-shadow: 0px 0px 10px 10px #fafafa;
          border-radius: 10px;
          margin-top: 20px;
          display: flex;
          align-items: center;
          .icon-weixuanzhong {
            display: inline-block;
            font-size: 45px;
            color: #fe713f;
            font-weight: bold;
            transform: scale(.36);
            vertical-align: middle;
          }
          .txt {
            font-size: 24px;
            color: #999999;
            padding-bottom: 10px;
            // &:before {
            //   display: inline-block;
            //   width: 18px;
            //   height: 18px;
            //   content: '';
            //   border-radius: 50%;
            //   border: 2px solid #fe713f;
            //   margin-right: 10px;
            // }
            .pro_num {
              font-size: 30px;
              color: #fe723e;
            }
          }
        }
        .detail_item {
          width: 100%;
          min-height: 142px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1Px solid #e6e6e6;
          color: #afafaf;
          .left_box {
            width: 80%;
            .nick {
              font-size: 28px;
              color: #222;
            }
            .create_time {
              font-size: 26px;
              color: #afafaf;
              padding-top: 10px;
            }
          }
          .right_box {
            .num {
              font-size: 30px;
              color: $color;
              text-align: right;
              .point {
                font-size: 24px;
                color: #999999;
              }
            }
            .phone {
              font-size: 26px;
              color: #afafaf;
            }
            .earning {
              text-align: right;
              font-size: 24px;
              .point {
                font-size: 30px;
                color: #fe723e;
              }
            }
            .period {
              font-size: 24px;
              text-align: right;
              .overplus {
                color: #fe723e;
              }
            }
          }
        }
        .detail_item:last-child {
          border-bottom: none;
        }
        .public_none_data {
          position: absolute;
          left: 0;
          right: 0;
          top: 35%;
          bottom: 0;
          margin: auto;
        }
      }
    }
    // bottom
    .cur_footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      height: 90px;
      div {
        width: 50%;
        float: left;
        text-align: center;
        line-height: 90px;
        font-size: 28px;
        &.switch_in {
          background: #fff0eb;
          color: #fe6e3a;
        }
        &.switch_out {
          background: #fe6e3a;
          color: #fff;
        }
      }
    }
    .cur_footer1 {
      width: 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      height: 90px;
      background: #fe6e3a;
      color: #fff;
      text-align: center;
      line-height: 90px;
      font-size: 28px;
    }
  }
</style>
